<!-- html -->
<template>
  <view class="container">
    <!-- 顶部导航 -->
    <scroll-view
      scroll-x
      class="nav-list"
      scroll-with-animation
      :scroll-into-view="intoView"
    >
      <template v-for="(item, i) in types">
        <view
          class="nav-item"
          @click="chang_nav_index(i)"
          :id="'a' + i"
          :key="item.id"
          :class="curent_nav == i ? 'nav-item-active' : ''"
        >
          <text>{{ item.name }}</text>
        </view>
      </template>
    </scroll-view>
    <!-- 商品列表 -->
    <view class="goods-list" v-if="list.length>0">
      <template v-for="item in list">
        <view class="good-item" :key="item.id">
         <view class="img" v-show="item.goods_images.length>0">
         	<image :src="item.goods_images[0]" mode=""></image>
         </view>
          <view class="name">
            {{ item.goods_name }}
          </view>
          <view class="bottom">
            <view class="price"> ￥ {{ item.goods_price }} </view>
            <view class="type">
              {{ item.type_text }}
            </view>
          </view>
        </view>
      </template>
    </view>
	<view class="nodata" v-else>
		<image 
		src="https://community.chuangxiangdianli.com/images/empty/nodata.png" mode=""></image>
	</view>
    <!-- 底部的tabbar -->
    <market-tab-bar :activeIndex="bottom_tab_bar_index" />
	<u-loadmore :status="status" />
  </view>
</template>
<!-- js -->
<script>
	// 引入封装的请求
	import request from '@/utils/request.js'	
import MarketTabBar from "../../common/MarketTabBar/index.vue";
export default {
  components: {
    MarketTabBar,
  },
  data() {
    return {
      // 当前导航的索引
      curent_nav: 0,
      // scroll-into-view
      intoView: "a0",
	  // 当前的分类id
	  cate_id:null,
      // 商品列表
      list: [],
      // 底部导航的高亮索引
      bottom_tab_bar_index: "1",
	  // 分类列表
	  types:[],
	  // 当前页码
	  pageNo:1,
	  // 当前的数据条数
	  limit:10,
	  // 是否正在请求数据
	  is_loading:false,
	  // 是否请求完数据
	  is_bottom:false,
	  // 底部正在加载中
	  status: 'loadmore',
    };
  },
  computed: {},
  watch: {},
  onLoad() {},
  onShow() {
	  this.get_cate_list()
  },
  onReachBottom() {
    // console.log("bottom");
  },
  // 自定义返回逻辑
  onBackPress() {
    uni.navigateBack({
      url: "/neighbor/index",
    });
    return true; //表示禁止默认返回
  },
  methods: {
    // 改变顶部索引
    chang_nav_index(i) {
      this.curent_nav = i;
      if (i > 0) {
        let num = Number(i) - 1;
        this.intoView = "a" + num;
        // console.log(this.intoView);
      }
	  this.cate_id = this.types[i].id
	  this.get_recommend_list()
	  this.pageNo = 1
	  this.is_loading = false
	  this.is_bottom = false
    },
    // 改变底部tabbar
    chang_bottom_tab(i) {
      this.bottom_tab_bar_index = "" + i;
      // console.log(this.bottom_tab_bar_index)
    },
	// 获取分类列表
	get_cate_list(){
		let that = this
		request.get('Mini/goods/goodsClass').then(res => {
			// console.log(res)
			if (res.status) {
				that.types = res.data
				that.cate_id = res.data[0].id
				that.get_recommend_list()
			}else{
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		}).catch(res => {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		})
	},
	// 推荐商品列表
	get_recommend_list(turn){
		let that = this
		that.is_loading = true
		request.get('wechat/getFleaGoods',{
			page:that.pageNo,
			pre_page:that.limit,
			type:1,
			cate_id:that.cate_id
		}).then(res => {
			console.log('首页数据', res)
			that.is_loading = false
			if (res.code==200) {
				if(turn){
					if(res.data.data.length>0){
						that.list = [
							...that.list,
							...res.data.data
						]
					}
				}else{
					that.list = res.data.data
				}
				
				if(res.data.total==that.list.length){
					// that.is_boottom = true
					that.status = 'nomore';
				}
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		}).catch(res => {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		})
	}
  },
};
</script>
<!-- css -->
<style lang="scss" scoped>
.container {
  width: 100vw;
  // height: 100vh;
  // overflow: auto;
  box-sizing: border-box;
  background-color: #f3f5f8;
  padding-bottom: 100rpx;
  .nav-list {
    height: 99rpx;
    white-space: nowrap;
    padding: 0 24rpx;
    .nav-item {
      display: inline-block;
      line-height: 99rpx;
      text-align: center;
      height: 100%;
      border-bottom: 5rpx solid transparent;
      margin-right: 40rpx;
      box-sizing: border-box;
      &.nav-item-active {
        border-color: #fbb10d;
      }
    }
  }
  .nodata{
  	width: 100%;
  	display: flex;
  	justify-content: center;
  	&>image{
  		width: 400rpx;
  		height: 400rpx;
  	}
  }
  .goods-list {
    margin-top: 15rpx;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    background-color: #f3f5f8;
    box-sizing: border-box;
    padding: 0 22rpx;
    .good-item {
      width: 340rpx;
      padding-bottom: 17rpx;
      border-radius: 10px;
      background-color: #ffffff;
      margin-right: 22rpx;
      margin-bottom: 15rpx;
      &:nth-child(2n) {
        margin-right: 0;
      }
      .img {
        width: 340rpx;
        height: 360rpx;
      }
      .name {
        width: 100%;
        padding: 0 9rpx;
        box-sizing: border-box;
        margin-top: 18rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 78rpx;
      }
      .bottom {
        width: 100%;
        padding: 0 9rpx;
        margin-top: 20rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .price {
          font-size: 30rpx;
          font-family: Hiragino Sans GB;
          font-weight: bold;
          color: #b83d42;
        }
        .type {
          min-width: 83rpx;
          height: 27rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #333333;
          border-radius: 3rpx;
          font-size: 18rpx;
          font-family: Hiragino Sans GB;
          font-weight: bold;
          color: #fefefe;
        }
      }
    }
  }
}
</style>
